<template>
  <div class="ml-head">
    <div class="tab">
      <p @click="num = 1" :class="{ tabcol: num == 1 }">日榜</p>
      <p @click="num = 2" :class="{ tabcol: num == 2 }">周榜</p>
    </div>
    <div class="mrt">
      <!-- 左边部分 -->
      <div class="mrt-left">
        <!-- 图片部分 -->
        <div class="leftimg"></div>
        <!-- 文字部分 -->
        <div class="mrt-left-text">
          <div><span>灰太狼小迷妹</span></div>
          <div><span>昨日榜首</span> <span>夺魁x4</span></div>
        </div>
      </div>
      <!-- 右边部分 -->
      <div class="mrt-right">
        <router-link tag="span" to="/home/mrt">名人堂&nbsp;〉</router-link>
      </div>
    </div>
    <div class="phb">
      <div class="phb-one">
        <div></div>
        <div class="phbdown">
          <p>溟濛不如折...</p>
          <p>278.5k魅力值</p>
          <span>2</span>
        </div>
      </div>
      <div class="phb-two">
        <div></div>
        <div class="phbdown">
          <p>白云苍狗</p>
          <p>464k魅力值</p>
          <span>1</span>
        </div>
      </div>
      <div class="phb-three">
        <div></div>
        <div class="phbdown">
          <p>无情的饭</p>
          <p>207.1k魅力值</p>
          <span>3</span>
        </div>
      </div>
    </div>
    <div class="phb-end">
      <div class="phb-end-one">
        <div class="phb-end-one-four">
          <div class="fourfivesix">4</div>
          <div class="fourfivesix-imgone"></div>
          <div class="fourfivesix-text">
            <span>玉梦（摆烂）</span>
            <span>192.8k魅力值</span>
          </div>
        </div>
      </div>
      <div class="phb-end-one">
        <div class="phb-end-one-four">
          <div class="fourfivesix">5</div>
          <div class="fourfivesix-imgtwo"></div>
          <div class="fourfivesix-text">
            <span>诗意再也不种树了</span>
            <span>111.1k魅力值</span>
          </div>
        </div>
      </div>
      <div class="phb-end-one">
        <div class="phb-end-one-four">
          <div class="fourfivesix">6</div>
          <div class="fourfivesix-imgthree"></div>
          <div class="fourfivesix-text">
            <span>妙妙</span>
            <span>101.3k魅力值</span>
          </div>
        </div>
      </div>
    </div>
    <div class="phb-enddown">
      <div class="phb-end-one">
        <div class="phb-end-one-four">
          <div class="fourfivesix">-</div>
          <div class="fourfivesix-imgenddown"></div>
          <div class="fourfivesix-text-enddown">
            <span>半塘</span>
            <span>名次提升还差:0</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 1,
    };
  },
};
</script>

<style lang='scss'>
.ml-head {
  .tab {
    width: 230px;
    height: 60px;
    margin: 34px auto;
    background-color: #cecece;
    font-size: 28px;
    display: flex;
    justify-content: space-between;
    border-radius: 38px;
    padding: 3px;
  }
  .tab p {
    width: 110px;
    height: 52px;
    transform: translateY(1px);
    line-height: 52px;
    text-align: center;
    border-radius: 38px;
    color: #ceced1;
  }
  .tabcol {
    background-color: white;
  }
  .mrt {
    width: 670px;
    height: 150px;
    margin: 0 auto 14px;
    background-image: url(@/assets/img/home/Home-img/gxone.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  .phb {
    width: 100%;
    height: 472px;
    background-image: url(@/assets/img/home/Home-img/gxfive.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }
  .phb-end {
    width: 100%;
    height: 622px;
    background-color: #1c1c1e;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }

  // xuyu写的部分
  .mrt-left {
    width: 310px;
    height: 110px;
    display: flex;
    justify-content: space-between;
  }
  .mrt-right {
    width: 300px;
    height: 26px;
    text-align: center;
    display: flex;
    justify-content: flex-end;
    // flex-direction: column-reverse;
  }
  .mrt-left .leftimg {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background-image: url(@/assets/img/home/Home-img/gxten.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .mrt-left-text {
    width: 190px;
    height: 110px;
    text-align: center;
    line-height: 50px;
  }

  .mrt-left-text div {
    font-size: 18px;
    display: block;
    width: 186px;
    height: 55px;
    color: white;
  }
  .mrt-left-text div:nth-child(1) span {
    font-size: 30px;
    font-weight: bold;
  }
  .mrt-left-text div:nth-child(2) {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .mrt-left-text div:nth-child(2) span {
    font-size: 18px;
    display: block;
    width: 80px;
    height: 30px;
    border: 1px solid white;
    line-height: 30px;
    border-radius: 18px;
    text-align: center;
  }
  .mrt-left-text div:nth-child(2) span:nth-child(1) {
    background-color: #f2bc77;
  }
  .mrt-left-text div:nth-child(2) span:nth-child(2) {
    background-color: #f96f8b;
  }
  .mrt-right span {
    display: block;
    width: 110px;
    height: 26px;
    font-size: 24px;
    text-align: right;
    color: white;
  }

  .phb-one {
    width: 222px;
    height: 420px;
    // background-color: pink;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
  }
  .phb-two {
    width: 222px;
    height: 420px;
    // background-color: pink;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
  }
  .phb-three {
    width: 222px;
    height: 420px;
    // background-color: pink;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
  }
  // 第一
  .phb-one div:nth-child(1) {
    width: 112px;
    height: 112px;
    background-color: #f2bc77;
    border-radius: 50%;
    background-image: url(@/assets/img/home/Home-img/gxthree.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .phb-one div:nth-child(2) {
    width: 222px;
    height: 200px;
    margin-top: 52px;
    background: linear-gradient(0deg, #653d8d, #784799);
    box-shadow: 0px 3px 27px 0px rgba(79, 32, 99, 0.26);
    border-radius: 16px 16px 0px 0px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-around;
  }
  // 第二
  .phb-two div:nth-child(1) {
    width: 130px;
    height: 130px;
    background-color: #f2bc77;
    border-radius: 50%;
    background-image: url(@/assets/img/home/Home-img/gxtwo.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .phb-two div:nth-child(2) {
    width: 222px;
    height: 222px;
    margin-top: 52px;
    background: linear-gradient(0deg, #653d8d, #784799);
    box-shadow: 0px 3px 27px 0px rgba(79, 32, 99, 0.26);
    border-radius: 16px 16px 0px 0px;
    transform: translateZ(200px);
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-around;
  }
  // 第三
  .phb-three div:nth-child(1) {
    width: 112px;
    height: 112px;
    background-color: #f2bc77;
    border-radius: 50%;
    background-image: url(@/assets/img/home/Home-img/gxfour.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .phb-three div:nth-child(2) {
    width: 222px;
    height: 200px;
    margin-top: 52px;
    background: linear-gradient(0deg, #653d8d, #784799);
    box-shadow: 0px 3px 27px 0px rgba(79, 32, 99, 0.26);
    border-radius: 16px 16px 0px 0px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-around;
  }
  .phbdown p {
    color: #ffffff;
  }
  .phbdown p:nth-child(1) {
    font-size: 30px;
    font-weight: 400;
  }
  .phbdown p:nth-child(2) {
    font-size: 22px;
    font-weight: 400;
    opacity: 0.8;
  }
  .phbdown span {
    font-size: 78px;
    font-family: ZiZhiQuXiMaiTi;
    font-weight: 400;
    color: #72529b;
  }

  .phb-end-one {
    width: 690px;
    height: 150px;
    // background-color: pink;
    margin: 0 auto;
    display: flex;
    align-items: center;
  }
  .phb-end-one-four {
    width: 440px;
    height: 96px;
    // background-color: #f2bc77;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  .fourfivesix {
    width: 13px;
    height: 17px;
    text-align: center;
    font-size: 22px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #c7c7c7;
  }
  .fourfivesix-imgone {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background-image: url(@/assets/img/home/Home-img/gxsix.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .fourfivesix-imgtwo {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background-image: url(@/assets/img/home/Home-img/gxseven.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .fourfivesix-imgthree {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background-image: url(@/assets/img/home/Home-img/gxeight.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  // 内容
  .fourfivesix-text {
    width: 240px;
    height: 96px;
    // background-color: red;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .fourfivesix-text span {
    width: 245px;
    height: 35px;
    display: block;
    color: #fff;
  }
  .fourfivesix-text span:nth-child(1) {
    font-size: 30px;
  }
  .fourfivesix-text span:nth-child(2) {
    font-size: 20px;
    color: #ff7868;
  }
  // 底部
  .phb-enddown {
    width: 750px;
    height: 138px;
    // background-color: #f96f8b;
    background: #1c1c1e;
    box-shadow: 0px -3px 27px 0px rgba(255, 255, 255, 0.16);
    border-radius: 16px 16px 0px 0px;
  }
  .fourfivesix-text-enddown {
    width: 240px;
    height: 96px;
    // background-color: red;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .fourfivesix-text-enddown span {
    width: 245px;
    height: 35px;
    display: block;
    color: #fff;
    font-size: 30px;
  }

  .fourfivesix-text-enddown span:nth-child(2) {
    font-size: 20px;
    color: #666666;
  }
  .fourfivesix-imgenddown {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background-image: url(@/assets/img/home/Home-img/gxnine.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
}
</style>